﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>键盘控制DIV移动事件</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div{
        	width: 100px;
        	height: 100px;
        	background: red;
        	position: absolute;
        	border: 1px solid #000;
        }
      
    </style>
</head>
<body>
<div class="div" id="j_div"></div>
<script type="text/javascript">

    window.onload=function(){

		  	var oDiv  = document.getElementById('j_div');
		  	var oDiv2  = document.getElementsByClassName('div2');
				
				/* 不是所有元素都能接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件，所以这里不能用div,document可以接收
				 * onkeydown 如果按下不抬起，会连续触发。默认连续按钮中有间隔时间，为了判断用户真实操作是否是要继续按下还是误操作
				 * 可以使用定时器解决问题
				 */
				
				document.onkeydown = function(ev){
					var ev = ev || event;
					//console.log(oDiv.offsetLeft);
					switch(ev.keyCode){
						case 37:
							oDiv.style.left = oDiv.offsetLeft-10+'px';
						break;
						case 38:
							oDiv.style.top = oDiv.offsetTop-10+'px';
						break;
						case 39:
							oDiv.style.left = oDiv.offsetLeft+10+'px';
						break;
						case 40:
							oDiv.style.top = oDiv.offsetTop+10+'px';
						break;
					}
					
					
				}
		  	
		}
</script>
</body>

</html>
